<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_页面固定广告条</title>
    <style>
        .top{
            background-color: #5aa4ae;
            height: 120px;
            color: #fff;
            font-size: 30px;
            position: fixed;
            top: 0;
            width: 100vw;
        }
        .left,.right{
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left{
            background-color: #fff799;
            left: 20px;
        }
        .right{
            background-color: #f35336;
            right: 20px;
        }
    </style>
</head>
<body>
<div class="top">我是顶部的广告条</div>
<div class="left">我是左侧的广告条</div>
<div class="right">我是右侧的广告条</div>
<div class="main">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores culpa ipsa nisi officia
        praesentium totam veritatis vero. Corporis cum enim esse iste officia porro provident qui quis, suscipit veniam?
    </div>
    <div>Dicta dolorem dolores, eum minus quod quos similique. Aliquam eligendi est expedita ipsa ipsum laudantium,
        neque voluptate. Animi consequatur delectus libero modi quaerat, quasi voluptatem. At deleniti impedit molestias
        veniam!
    </div>
    <div>Asperiores at beatae, commodi et ex, maiores minima nostrum officia pariatur quia quibusdam, quod quos
        similique! Accusantium asperiores atque distinctio dolores facilis fugiat inventore obcaecati odit ratione,
        repellendus tenetur veritatis?
    </div>
    <div>A, ab corporis cum distinctio ipsa iusto nisi nobis omnis quas veritatis. Accusamus adipisci culpa, deleniti
        eos esse et fuga fugiat molestias nobis praesentium quam, quis, reprehenderit saepe unde ut.
    </div>
    <div>A corporis, enim et expedita maxime optio praesentium quasi quia suscipit voluptatibus? Itaque laudantium
        maiores minus molestias numquam, perferendis provident ut. Accusantium adipisci deleniti dolorem expedita non,
        numquam repellendus suscipit.
    </div>
    <div>Commodi debitis error esse exercitationem hic impedit maiores maxime nesciunt, quae qui quos tempora.
        Aspernatur beatae commodi ipsum nemo pariatur praesentium quas sequi tenetur. Aliquid aspernatur deserunt harum
        illo laborum?
    </div>
    <div>Fugiat ipsa ipsam labore minima molestiae nostrum numquam provident quaerat temporibus voluptates? Autem cum
        dignissimos, doloribus explicabo molestias obcaecati provident qui repellat repellendus, reprehenderit
        repudiandae, saepe ut! Consectetur, in vero?
    </div>
    <div>Animi eos nobis possimus quos repellat veritatis voluptatem! Aut ducimus eos explicabo itaque nihil sit soluta?
        Deleniti dicta dignissimos eaque eveniet, exercitationem harum impedit, odio perspiciatis reiciendis suscipit,
        tempore voluptate!
    </div>
    <div>Accusamus aperiam consequuntur esse hic itaque odio, quo velit voluptas. Animi aut commodi consequatur
        corporis, culpa ducimus earum itaque iure magni mollitia odit quae quia quis sequi sint ut, vitae?
    </div>
    <div>Asperiores beatae consequuntur cupiditate deleniti, dolores doloribus eos impedit minus, necessitatibus nulla,
        odio quasi suscipit voluptates! Atque dignissimos, dolores eligendi eos est facere hic, illum ipsum recusandae
        similique sint voluptatibus.
    </div>
    <div>A accusantium aliquid animi autem consequatur debitis delectus doloremque earum eos, expedita facere fuga hic
        ipsam iste iusto laboriosam obcaecati officiis rem saepe voluptas. Asperiores incidunt quas repellendus unde
        voluptatum?
    </div>
    <div>A alias inventore optio sint voluptatibus. Architecto eius itaque iure magnam odio. Accusamus, beatae, corporis
        deleniti dicta laudantium magnam mollitia sapiente sequi sit tempora tempore tenetur unde. Ea, molestiae neque?
    </div>
    <div>A adipisci, at deleniti dolore libero magni nulla saepe sapiente! Aliquid eos facilis hic inventore ipsa
        maiores obcaecati recusandae repudiandae sapiente totam? Aliquid doloribus earum harum laboriosam molestias
        similique veritatis?
    </div>
    <div>Culpa, cupiditate delectus, deserunt dolor dolore eos, ex fugiat molestiae nesciunt nihil obcaecati quae
        quaerat sequi! At fugit id ipsam, maxime molestias natus necessitatibus nihil nostrum nulla, omnis porro
        voluptates!
    </div>
    <div>Cumque dignissimos error eveniet iusto molestiae, tempore unde. Ab adipisci assumenda aut eius error labore,
        non possimus soluta totam velit! Alias aut cumque est modi sed! Commodi ipsam nihil omnis.
    </div>
    <div>Cum delectus ipsam quibusdam totam? Adipisci dicta hic ipsam porro repellat! A aliquam, enim exercitationem in
        ipsa libero magnam quaerat tempora. Aperiam deleniti hic laborum nesciunt quidem sint voluptatem? Voluptate.
    </div>
    <div>Alias aliquid at blanditiis cumque debitis eaque eius eligendi esse exercitationem facere fugit id inventore
        necessitatibus nisi nulla optio perspiciatis possimus, quam quod sed sint soluta, tempore temporibus ut vero!
    </div>
    <div>Ab architecto at consequatur cumque fuga, inventore magni nihil numquam quam ratione? Consequuntur culpa cum
        cumque esse expedita illum ipsam, magni maxime modi qui rem similique sint sunt vel vero.
    </div>
    <div>Atque consequatur, deleniti deserunt eligendi harum ipsa ipsum molestiae nobis, numquam perferendis quaerat qui
        quia saepe similique sint temporibus voluptatibus! Alias animi cumque dignissimos dolorem dolores esse ex,
        laborum sit.
    </div>
    <div>Dolorum, esse maxime modi nesciunt quo saepe temporibus. At aut blanditiis corporis culpa, ea esse porro quis
        temporibus! Accusamus dicta ducimus enim fugiat harum neque placeat quam, quis velit voluptatibus.
    </div>
    <div>Ex, perspiciatis veniam! Autem blanditiis commodi consequatur consequuntur corporis debitis dicta earum eius et
        expedita illum iusto laborum modi nostrum, pariatur quasi reprehenderit repudiandae soluta suscipit tenetur unde
        vero voluptas.
    </div>
    <div>Assumenda autem commodi consequuntur dicta, dolore dolorem doloribus dolorum ex harum id impedit inventore
        itaque necessitatibus nostrum, nulla numquam officia omnis perferendis provident quia recusandae repellat
        tenetur ullam velit voluptatibus.
    </div>
    <div>Exercitationem labore omnis quae quam qui suscipit ullam. Aliquam beatae consequatur cupiditate dolore earum
        inventore, nam nobis obcaecati quae, quas quos reprehenderit voluptatibus. Architecto cupiditate libero quidem
        repellat vel voluptates?
    </div>
    <div>At culpa dolor ducimus eius et, eveniet ex impedit modi numquam perspiciatis quas quos reprehenderit,
        voluptatum? Adipisci commodi, debitis deserunt dolores, harum id illo itaque quibusdam quo ratione sed tempore.
    </div>
    <div>Aspernatur, commodi consequuntur debitis dolores earum eius esse id incidunt inventore, iste labore laborum
        laudantium maiores maxime modi necessitatibus non perferendis quaerat quasi quis quisquam quos, soluta vel vero
        voluptate.
    </div>
    <div>Architecto dolores hic inventore minima modi nemo, tenetur ullam! Doloribus esse ex facilis nesciunt placeat
        quis! Aliquid et explicabo, incidunt ipsam laboriosam nam natus neque sapiente sed ut vero voluptatem.
    </div>
    <div>Accusantium consequuntur ducimus in incidunt odit quis unde. A aliquam corporis, eaque eligendi enim laudantium
        minus nemo quas repudiandae similique? Dolores ex inventore laudantium, maiores officiis perferendis quaerat
        reiciendis voluptates.
    </div>
    <div>Ab accusamus aperiam expedita obcaecati praesentium quisquam tempora, voluptatem. Adipisci dolorem earum et
        incidunt, iusto modi necessitatibus nesciunt nobis possimus quis quisquam ratione reprehenderit sapiente
        suscipit unde vero voluptatem! Harum.
    </div>
    <div>Accusamus dolore ea illum itaque libero molestiae nesciunt non saepe totam? Ab alias aliquam architecto
        blanditiis, exercitationem incidunt iure iusto libero nesciunt, odio provident quisquam quo similique sint
        temporibus voluptas!
    </div>
    <div>Ab, ad aliquam, asperiores aspernatur at commodi consectetur culpa deserunt eius facere fugiat id itaque iure
        magnam nihil perferendis, perspiciatis porro praesentium provident repellendus reprehenderit rerum sequi
        suscipit unde veniam.
    </div>
    <div>Ab animi atque beatae, blanditiis dolor explicabo libero maxime nisi repudiandae tempora, veniam voluptatem?
        Aliquid animi architecto aut ea earum esse nulla repudiandae totam voluptates voluptatibus. Blanditiis molestias
        odio vitae!
    </div>
    <div>A cumque earum excepturi laudantium magni maxime nostrum omnis quia rem rerum? Consectetur, corporis dolore,
        dolores eveniet fugiat itaque magnam modi neque nobis nulla, quae quaerat quia quidem quos voluptatibus!
    </div>
    <div>Cupiditate ex excepturi harum nisi odit praesentium voluptates. Aut cum cupiditate ea enim et exercitationem,
        facilis impedit libero molestiae natus nesciunt nobis officiis perferendis porro quos repellendus sequi vel
        veritatis.
    </div>
    <div>Architecto dolorum eligendi ipsum, minima molestias perferendis quaerat voluptatem? Dolores ipsum quo sunt.
        Autem dolorem et illum ipsam, iste quo rem saepe ut veniam voluptatum! Aspernatur assumenda blanditiis incidunt
        optio!
    </div>
    <div>Blanditiis cupiditate eos fugiat molestiae soluta. A accusamus animi atque consequatur cumque debitis dolorem
        dolorum error eum eveniet fugiat, illum in iste nulla placeat rem repudiandae sunt voluptate? Accusamus, est.
    </div>
    <div>Animi at consectetur consequatur, corporis cum delectus dignissimos dolor eius facilis impedit, libero maxime
        molestiae nobis optio quae repellendus suscipit veniam voluptates. Consectetur dolore doloribus excepturi
        facilis libero qui sapiente.
    </div>
    <div>Error ex mollitia similique vitae voluptatem? Assumenda at corporis deleniti eaque libero maiores molestias,
        repellendus tempora voluptate? Earum eveniet magnam obcaecati quasi quisquam quos vel voluptates? Cupiditate
        doloremque necessitatibus perferendis!
    </div>
    <div>Ad architecto corporis dolorem fugit incidunt iure libero minus mollitia nesciunt nulla numquam obcaecati
        officia rem reprehenderit saepe tempora veniam, voluptas. Eligendi illo libero molestiae quaerat temporibus vel
        voluptate voluptatem.
    </div>
    <div>Cumque dicta eius ipsum minus natus officiis quis quod ratione suscipit ullam. Commodi, ex, perferendis. Animi
        cupiditate distinctio perferendis quia totam? Aperiam consequatur cumque explicabo harum qui reprehenderit ut
        voluptatem!
    </div>
    <div>Animi at cum dolorem ducimus earum eum facere fugiat, hic illum in, iure maiores molestiae nesciunt numquam
        odio omnis, quos tenetur ullam vero voluptate. Doloribus hic maiores voluptates? Inventore, temporibus!
    </div>
    <div>Alias eius esse eveniet, ex fugit id minus molestiae obcaecati officia perspiciatis provident quibusdam sequi.
        Accusamus amet ea est fuga, labore libero neque omnis quibusdam sit sunt? Autem, commodi, dignissimos?
    </div>
    <div>Doloremque eveniet libero qui sunt ullam. Ab ad aperiam beatae corporis debitis delectus deleniti dolorum, eius
        expedita fuga in ipsam modi officia porro praesentium similique soluta voluptas, voluptatum? Ipsa, ut.
    </div>
    <div>Accusamus explicabo inventore labore quas recusandae voluptatum? Consequuntur cupiditate dolor doloremque, eius
        eligendi explicabo itaque perspiciatis! Accusantium, aliquam aliquid culpa ea enim error est expedita explicabo,
        illum molestiae porro voluptate.
    </div>
    <div>Ab accusantium, autem dolorem, doloribus ea esse, id itaque modi nam neque obcaecati quod recusandae totam vel
        voluptas. Ab distinctio dolor facilis hic impedit labore perspiciatis ratione similique unde voluptate!
    </div>
    <div>Aut autem corporis debitis dolorum eaque enim, eos hic impedit mollitia neque obcaecati, quia, quis reiciendis
        tenetur voluptates? Ab animi corporis dolorem eligendi esse excepturi, explicabo nam necessitatibus nesciunt
        similique?
    </div>
    <div>Beatae dolores illum, sed sunt tempora velit? Adipisci alias asperiores aut cumque error eum eveniet expedita
        explicabo facilis laborum molestias obcaecati perspiciatis praesentium quibusdam quod repellat, sapiente sunt
        tempore ullam.
    </div>
    <div>Cupiditate doloribus facilis impedit possimus totam. Adipisci cupiditate error in labore laborum magnam maxime
        molestiae, neque porro, provident qui velit veniam. Autem commodi dignissimos ipsa iste nisi nostrum, ut
        voluptas?
    </div>
    <div>Ab assumenda cum debitis dignissimos dolorem earum, esse excepturi in incidunt ipsam, iure laborum modi
        molestias nostrum odio officia ratione reprehenderit sequi suscipit totam! Aliquid natus optio quo repellat
        totam.
    </div>
    <div>Ad asperiores atque autem, debitis doloremque eaque earum est et expedita facere fugiat itaque laudantium
        maiores nam neque obcaecati odit omnis possimus quam quasi similique sint ullam vero voluptatibus voluptatum!
    </div>
    <div>Adipisci aliquam amet consequuntur corporis, culpa dicta dolorum esse excepturi fugiat impedit ipsum nesciunt
        nulla obcaecati omnis perspiciatis quam quasi recusandae repellendus repudiandae sed sit sunt suscipit tempore
        totam voluptatem!
    </div>
</div>
</body>
</html>